<script setup lang="ts">
  import { useArchiveForm } from './services'
  import { ref } from 'vue'
  import { FormInstance } from 'element-plus'

  const { form, submitLoading, submit } = useArchiveForm()
  const formRef = ref<FormInstance | null>(null)

  defineExpose({
    submitLoading,
    submit: async (orderIds: Array<string>) => {
      if (!formRef.value) {
        return null
      }
      try {
        await formRef.value.validate()
        return await submit(orderIds)
      } catch (error) {
        return null
      }
    },
  })
</script>

<template>
  <el-form ref="formRef" :model="form" label-position="top" class="modal_form_content form_content">
    <el-form-item label="处理备注">
      <el-input
        v-model.trim="form.remark"
        type="textarea"
        maxlength="200"
        show-word-limit
        resize="both"
        placeholder="请输入处理备注"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
  .form_content {
    padding-top: 12px;
  }

  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: 75px !important;
      width: 100% !important;
      max-height: 140px !important;
      overflow: hidden;
    }
  }
</style>
